<template>
  <main class="app-container">
    <tableComponent
      :config-data="admin.tableConfig"
      :list-data="admin.ADMIN_DATA.data"
    >
      <template v-slot:title>
        <div class="flex flex-ai-c flex-js-b">
          <el-button type="primary" icon="el-icon-edit" @click="openTemp('add')">添加</el-button>
          <div class="flex flex-ai-c">
            <el-select v-model="selectValue">
              <el-option
                v-for="item in admin.options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-input v-model="searchInput" @keyup.enter.native="searchData"></el-input>
            <el-button type="primary" icon="el-icon-search" @click="searchData">搜索</el-button>
          </div>
        </div>
      </template>
      <template v-slot:button="{ data }">
        <el-button type="primary" @click="openTemp('update',data)">修改</el-button>
      </template>
    </tableComponent>
    <section class="el-center-custom mrg-top">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.current_page"
        :page-sizes="[5, 10, 20]"
        :page-size="listQuery.per_page"
        layout="total, sizes, prev, pager, next, jumper"
        :total="admin.ADMIN_DATA.total">
      </el-pagination>
    </section>
    <el-dialog
      title="编辑"
      :visible.sync="dialogVisible"
      @close="resetTemp"
      center
      width="400px">
      <el-form :model="temp" ref="form" label-width="160px" label-position="top">
        <el-form-item label="配置项名称:">
          <el-input v-model="temp.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="配置项的值:">
          <el-input v-model="temp.value" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="isUpdate ? updateData() : uploadData()">提交</el-button>
          <el-button type="primary" @click="openTemp">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </main>
</template>
<script>
import tableComponent from '@/components/common/ele-table.vue';
import admin from '@/common/SDK/admin/index.js';
export default {
  name: 'admin',
  components: {
    tableComponent
  },
  data(){
    return {
      admin,
      //表单
      temp: {
        name: '',
        value: ''
      },
      //标识是添加还是修改
      isUpdate: false,
      /*用于打开弹出框的*/
      dialogVisible: false,
      //分页数据
      listQuery: {
        per_page: 5,
        page: 1
      },
      //搜索下拉数据
      selectValue: 0,
      searchInput: ''
    }
  },
  created(){
    this.getData()
  },
  methods: {
    /*获取数据*/
    getData(){
      const query = Object.assign(this.temp,this.listQuery);//合并分页数据
      this.admin.getConfig(query)
    },

    /*搜索数据*/
    searchData(){
      this.resetTemp();
      switch (this.selectValue){
        case 0:
          break;
        case 1: this.temp.name = this.searchInput;
          break;
        case 2: this.temp.value = this.searchInput;
          break;
      }
      this.getData();
    },

    /*提交数据*/
    uploadData(){
      this.admin.setConfig(this.temp)
      .then(()=>{
        this.resetTemp();
        this.getData();
        this.openTemp();
      })
    },

    /*修改数据*/
    updateData(){
      this.admin.updateConfig(this.temp)
      .then(res=> {
        this.resetTemp();
        this.getData();
        this.openTemp();
      })
    },

    /*打开模板*/
    openTemp(type,data){
      this.isUpdate = type === 'update';
      this.isUpdate ? this.setTemp(data) : '';//解决表格每一项点击触发方法
      this.dialogVisible = !this.dialogVisible;
    },

    /*设置模板数据*/
    setTemp(data){
      this.temp['name'] = data.name;
      this.temp['value'] = data.value;
    },

    /*重置模板数据*/
    resetTemp(){
      return this.temp = {
        name: '',
        value: ''
      }
    },

    /*分页*/
    //当前页面改变
    handleCurrentChange(num){
      this.listQuery.page = num;
      this.getData();
    },
    //每页数改变
    handleSizeChange(num){
      this.listQuery.per_page = num;
      this.getData();
    }
  }
}
</script>
